<template>
	<div class="anchor-com-more-box">
		<HeaderNav v-if="$channel=='zyzq'&&getPlatform =='app'" :title="'热门主播'"></HeaderNav>
		<div v-else class="list-header">
			<div class="header-left">
				<p class="header-title">热门主播</p>
			</div>
		</div>
		<div class="list-connect">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<li v-for="(v,index) in anchorFCArray" :key="index" @click="goToAnchorPage(v.contentType,v.id)">
					<img :src="v.zbHeadImg+'?x-oss-process=image/resize,m_fixed,h_330,w_330'"/>
					<p class="li-title">{{v.title}}</p>
					<div class="li-intor">
						<p>{{v.zbIntro}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import HeaderNav from '../../components/zyzq/headerNav'
	export default {
		components:{
          HeaderNav,
		},
		props: {},
		data() {
			return {
				anchorFCArray: [], //主播风采数组
        page: 0,
		busy: false,//打开滚动
		getPlatform:fun.getPlatform(), //app wx
		scroll:0,//页面滚动距离
			}
		},
		computed: {},
		created() {
			this.$store.dispatch("hideNav");
		},
		activated(){
			this.$store.dispatch("hideNav");
			document.getElementsByClassName( "list-connect")[0].scrollTop = this.scroll;//设置滚动
		},
		beforeRouteLeave(to, from, next) {
			console.log(to,'to');
			console.log(from,'from')
			if(from.path == `/${this.$channel}/anchorComMore` && to.path ==`/${this.$channel}/zyzqHome`){
				this.scroll = 0 //再次进入热门主播页回到顶部
			}else{				
				this.scroll = document.getElementsByClassName( "list-connect")[0].scrollTop;
			} 
		   next();
		},

		mounted() {},
		methods: {
      loadMore: function() {
        this.busy = true

        // 多次加载数据
        //this.tipText = "数据加载中..."
				setTimeout(() => {
          this.page++;
					this.getAnchorArray();
				}, 200);
      },
			//主播风采数据
			getAnchorArray() {
				this.$http.get("/h5live/getZhuBoList", {
						params: {
							p: this.page,//第几页
							pSize: 10//每页数据的条数
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
								if(res.data.data) { //防止null
                  if(res.data.data.length){
                    this.anchorFCArray = [...this.anchorFCArray, ...res.data.data];
                    this.busy = false;
                    if(res.data.data.length<10){
                      this.busy = true;//禁用 没有更多数据了
                    }
                  }
								}
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			goToAnchorPage(type, connect) { //跳转主播详情页面
			 
				if(type === '1') { //内容 
					this.$router.push({
						path: `/${this.$channel}/connectShow`,
						query: {
							id: connect
						}
					});
				} else if(type === '2') { //视频 
          this.$router.push({
						path: `/${this.$channel}/videoMiddleBgBlackPlay`,
						query: {
							id: connect
						}
					});
				} else {
					console.log('暂无明星主播类型')
				}
			}
		}
	};
</script>

<style scoped="scoped">
	.iconyoujiantou1 {
		transform: rotate(180deg);
		margin-left: 25px;
		font-size: 28px;
	}
	
	.anchor-com-more-box {
		width: 100vw;
		height: 100vh;
		background: white;
	}
	
	.list-header {
		width: 100vw;
		height: 80px;
		/*background: darkgray;*/
		display: flex;
		align-items: center;
		/*padding: 0 30px;*/
	}
	
	.header-left,
	.header-right {
		height: 80px;
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.header-right {
		justify-content: flex-end;
		margin-right: 45px;
	}
	
	.header-title {
		width: 100vw;
		height: 80px;
		font-size: 34px;
		font-weight: 500;
		color: #333333;
		text-align: center;
		line-height: 80px;
	}
	
	.header-more {
		font-size: 22px;
		font-weight: 300;
		color: rgba(102, 102, 102, 1);
		line-height: 40px;
		margin-right: 6px;
	}
	
	.list-header-zyzq ~ .list-connect{
		height:calc(100vh - 88px); ;
	}
	
	.list-connect {
		width: 100vw;
		height: calc(100vh - 80px);
		background: white;
		overflow-y: scroll;
		padding-bottom: 100px;
		-webkit-overflow-scrolling: touch;
	}
	
	.list-connect ul {
		display: flex;
		flex-wrap: wrap;
		padding-top: 30px;
    padding-bottom: 20px;
	}
	
	.list-connect ul li {
		width: 330px;
		margin-left: 30px;
		margin-top: 20px;
		position: relative;
	}
	
	.list-connect ul li:nth-child(2),
	.list-connect ul li:nth-child(1) {
		margin-top: 0;
	}
	
	.list-connect ul li img {
		width: 330px;
		height: 330px;
		border-radius: 8px;
	}
	
	.li-title {
		max-width: 330px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28px;
		font-weight: 400;
		color: #333333;
		margin-top: 18px;
		/*background: seagreen;*/
		padding-left: 6px;
		margin-bottom: 10px;
	}
	
	.li-intor {
		width: 100%;
		/*height: 64px;*/
		color: #999999;
		line-height: 32px;
		padding-left: 6px;
		white-space: pre-wrap;
		font-size: 24px;
		text-align: justify;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
</style>